<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition template="/telaPrincipal.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://xmlns.jcp.org/jsf/core">

	<ui:define name="testeJR">
		<h:form id="frmTabCadastro">
		
		<p:dialog id="dialog" header="Software" widgetVar="saveSoftware" dynamic="true" draggable="false" resizable="false" width="350px" height="50px">
		
		<h:outputLabel value="Dados Cadastros com Sucesso" style="font-family: Arial;font-weight: bold; font-size: 18px" />
		
		</p:dialog>
		
			<p:remoteCommand name="updateChart" actionListener="#{softwareMB.updateChart()}" oncomplete="updateChartData(xhr, status, args);" />
			
			<p:tabView id="TabViewCadastro">
				<p:tab id="tabCadastro" title="Cadastro">
				
				<br></br>
				
					<p:fieldset legend="Informações do Software">
					
					<br></br>
					
						<h:panelGrid columns="2" cellpadding="2">
								
							<h:outputLabel value="Nome" for="txtNome" style="font-family: Arial;font-weight: bold; font-size: 18px" />
<<<<<<< .mine
							<p:inputText id="txtNome" size="50" value="#{softwareMB.softwareInsert.nome}" />
=======
							<p:inputText id="txtNome" size="50" value="#{software.nome}" />
>>>>>>> .r28
	
							<h:outputLabel value="Desenvolvedor" for="txtDesenvolvedor" style="font-family: Arial;font-weight: bold; font-size: 18px" />
<<<<<<< .mine
							<p:inputText id="txtDesenvolvedor" size="50" value="#{softwareMB.softwareInsert.desenvolvedor}" />
=======
							<p:inputText id="txtDesenvolvedor" size="50" value="#{software.desenvolvedor}" />
>>>>>>> .r28
	
							<h:outputLabel value="Data de Criação" for="txtDataCriacao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
<<<<<<< .mine
							<p:inputMask id="txtDataCriacao" mask="99/99/9999" size="10" value="#{softwareMB.softwareInsert.datacriacao}"></p:inputMask>							
=======
							<p:inputMask id="txtDataCriacao" mask="99/99/9999" size="10" value="#{software.datacriacao}"></p:inputMask>							
>>>>>>> .r28
	
							<h:outputLabel value="Descrição" for="txtDescricao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
<<<<<<< .mine
							<p:inputText id="txtDescricao" size="50" value="#{softwareMB.softwareInsert.descricao}" />
=======
							<p:inputText id="txtDescricao" size="50" value="#{software.descricao}" />
>>>>>>> .r28
						</h:panelGrid>
						
						
					</p:fieldset>
				</p:tab>
				
				<p:tab id="tabAvaliacao" title="Avaliação">
					<p:fieldset legend="Avaliação do Software">
					<center>
						<h:panelGrid columns="3">
							<p:fieldset legend="Manutenibilidade">
<<<<<<< .mine
								<p:selectOneRadio id="radioManutenibilidade" value="#{softwareMB.softwareInsert.manutenibilidade}">
=======
								<p:selectOneRadio id="radioManutenibilidade" value="#{software.manutenibilidade}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>	
							<p:fieldset legend="Funcionalidade">
<<<<<<< .mine
								<p:selectOneRadio id="radioFuncionalidade" value="#{softwareMB.softwareInsert.funcionalidade}">
=======
								<p:selectOneRadio id="radioFuncionalidade" value="#{software.funcionalidade}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>							
							<p:fieldset legend="Qualidade">
<<<<<<< .mine
								<p:selectOneRadio id="radioQualidade" value="#{softwareMB.softwareInsert.qualidade}">
=======
								<p:selectOneRadio id="radioQualidade" value="#{software.qualidade}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>												
							</h:panelGrid>
							</center>
							
							<center>
							<h:panelGrid columns="4">
							<p:fieldset legend="Confiabilidade">
<<<<<<< .mine
								<p:selectOneRadio id="radioConfiabilidade" value="#{softwareMB.softwareInsert.confiabilidade}">
=======
								<p:selectOneRadio id="radioConfiabilidade" value="#{software.confiabilidade}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							<p:fieldset legend="Portabilidade">
<<<<<<< .mine
								<p:selectOneRadio id="radioPortabilidade" value="#{softwareMB.softwareInsert.portabilidade}">
=======
								<p:selectOneRadio id="radioPortabilidade" value="#{software.portabilidade}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							
							<p:fieldset legend="Eficiência">
<<<<<<< .mine
								<p:selectOneRadio id="radioEficiência" value="#{softwareMB.softwareInsert.eficiencia}">
=======
								<p:selectOneRadio id="radioEficiência" value="#{software.eficiencia}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>						
						
							<p:fieldset legend="Usabilidade">
<<<<<<< .mine
								<p:selectOneRadio id="radioUsabilidade" value="#{softwareMB.softwareInsert.usabilidade}">
=======
								<p:selectOneRadio id="radioUsabilidade" value="#{software.usabilidade}">
>>>>>>> .r28
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							</h:panelGrid>
							</center>
							<center>
							<p:commandButton action="#{softwareMB.Salvar}" value="Salvar" oncomplete="saveSoftware.show()" icon="ui-icon-disk" />
							</center>						
						
						<center>
							<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/chartjs/Chart.min.js"></script>
	
							<canvas id="myChart" width="400" height="400"></canvas>
	
							<script>
								var myRadarChart;
								var ctx = document.getElementById('myChart').getContext('2d');
	
								var options = {
									//Boolean - Whether to show lines for each scale point
									scaleShowLine : true,
									//Boolean - Whether we show the angle lines out of the radar
									angleShowLineOut : true,
									//Boolean - Whether to show labels on the scale
									scaleShowLabels : false,
									// Boolean - Whether the scale should begin at zero
									scaleBeginAtZero : true,
									//String - Colour of the angle line
									angleLineColor : "rgba(0,0,0,.1)",
									//Number - Pixel width of the angle line
									angleLineWidth : 1,
									//String - Point label font declaration
									pointLabelFontFamily : "'Arial'",
									//String - Point label font weight
									pointLabelFontStyle : "normal",
									//Number - Point label font size in pixels
									pointLabelFontSize : 11,
									//String - Point label font colour
									pointLabelFontColor : "White",
									//Boolean - Whether to show a dot for each point
									pointDot : true,
									//Number - Radius of each point dot in pixels
									pointDotRadius : 3,
									//Number - Pixel width of point dot stroke
									pointDotStrokeWidth : 1,
									//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
									pointHitDetectionRadius : 20,
									//Boolean - Whether to show a stroke for datasets
									datasetStroke : true,
									//Number - Pixel width of dataset stroke
									datasetStrokeWidth : 2,
									//Boolean - Whether to fill the dataset with a colour
									datasetFill : true
								};
	
								function updateChartData(xhr, status, args) {
									var manutenibilidade = ((100 * args.manutenibilidade) / 5);
									var funcionalidade = ((100 * args.funcionalidade) / 5);
									var qualidade = ((100 * args.qualidade) / 5);
									var confiabilidade = ((100 * args.confiabilidade) / 5);
									var portabilidade = ((100 * args.portabilidade) / 5);
									var eficiencia = ((100 * args.eficiencia) / 5);
									var usabilidade = ((100 * args.usabilidade) / 5);
	
									console.log(manutenibilidade);
									console.log(funcionalidade);
									console.log(qualidade);
									console.log(confiabilidade);
									console.log(portabilidade);
									console.log(eficiencia);
									console.log(usabilidade);
	
									var data = {
										labels : [ "Manutenibilidade", "Funcionalidade", "Qualidade", "Confiabilidade", "Eficiência", "Portabilidade", "Usabilidade" ],
										datasets : [ {
											label : "The only dataset",
											fillColor : "rgba(151,187,205,0.2)",
											strokeColor : "rgba(151,187,205,1)",
											pointColor : "rgba(151,187,205,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [manutenibilidade, funcionalidade, qualidade, confiabilidade,
											        eficiencia, portabilidade, usabilidade]
										}]
									};
	
									myRadarChart = new Chart(ctx).Radar(data, options);
								}
							</script>
						</center>
					</p:fieldset>
				</p:tab>
			</p:tabView>
		</h:form>
	</ui:define>
</ui:composition>